import React, { Component } from "react";

class Form extends Component {
  state = {
    textValue: "",
  };

  handleChange = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  handleClick = () => {
    // console.log(this.state.textValue);
    // 拿到值了以后要将这个值传递给父组件，并且添加到list的里面, 子传父
    this.props.onGetItem({
      id: new Date().getTime(),
      name: this.state.textValue,
    });
    // 清除input的内容
    this.setState({
      textValue: "",
    });
  };

  render() {
    return (
      <>
        {/* 将input变成受控组件，用于拿到input的值 */}
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>添加</button>
      </>
    );
  }
}

export default Form;
